<template>
  <view class="orders-container">
    <scroll-view 
      class="order-list"
      scroll-y
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      @refresherrefresh="onRefresh"
      :refresher-triggered="isRefreshing"
    >
      <view class="order-item-wrapper" v-for="(order, index) in orderList" :key="index">
        <view class="order-item">
          <view class="order-header">
            <text class="order-date">{{ order.createTime }}</text>
          </view>
          <view class="order-content">
            <image 
              class="product-image" 
              :src="order.productImage || '/static/default/product.png'" 
              mode="aspectFill"
              @click="goToProduct(order.productId)"
            />
            <view class="product-info">
              <view class="product-name">{{ order.productName }}</view>
              <view class="product-desc">{{ order.productDesc }}</view>
              <view class="times-info">
                <text class="times">剩余次数：{{ order.remainingTimes }}次</text>
                <text class="amount">￥{{ order.amount }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="empty-state" v-if="orderList.length === 0">
        <image src="/static/images/index_page.png" mode="aspectFit"></image>
        <text>暂无订单</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderList: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      isRefreshing: false
    }
  },
  methods: {
    async getOrderList() {
      try {
        // 模拟订单数据
        const mockOrders = [
          {
            id: 1,
            createTime: '2024-03-20',
            productId: 1,
            productName: '脱毛套餐A',
            productDesc: '全身脱毛 12次',
            productImage: '/static/default/product.png',
            remainingTimes: 5,
            amount: 2999
          },
          {
            id: 2,
            createTime: '2024-03-18',
            productId: 2,
            productName: '美白套餐',
            productDesc: '全身美白护理 6次',
            productImage: '/static/default/product.png',
            remainingTimes: 4,
            amount: 1999
          },
          {
            id: 3,
            createTime: '2024-02-15',
            productId: 3,
            productName: '面部护理套餐',
            productDesc: '深层清洁 + 补水 8次',
            productImage: '/static/default/product.png',
            remainingTimes: 0,
            amount: 1599
          },
          {
            id: 4,
            createTime: '2024-01-20',
            productId: 1,
            productName: '脱毛套餐B',
            productDesc: '局部脱毛 6次',
            productImage: '/static/default/product.png',
            remainingTimes: 0,
            amount: 999
          }
        ];

        // 模拟分页
        const startIndex = (this.page - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        const pageData = mockOrders.slice(startIndex, endIndex);
        
        if (this.page === 1) {
          this.orderList = pageData;
        } else {
          this.orderList = [...this.orderList, ...pageData];
        }
        
        this.hasMore = endIndex < mockOrders.length;
      } catch (e) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        });
      }
    },
    
    async loadMore() {
      if (!this.hasMore) return
      this.page++
      await this.getOrderList()
    },
    
    async onRefresh() {
      this.isRefreshing = true
      this.page = 1
      await this.getOrderList()
      this.isRefreshing = false
    },
    
    goToProduct(productId) {
      uni.navigateTo({
        url: `/subpages/productDetail/productDetail?id=${productId}`
      })
    }
  },
  
  onLoad() {
    this.getOrderList()
  }
}
</script>

<style lang="scss" scoped>
.orders-container {
  height: 100vh;
  background-color: #f5f5f5;
  
  .order-list {
    height: 100%;
    padding: 20rpx;
    
    .order-item-wrapper {
      margin-bottom: 20rpx;
      border-radius: 16rpx;
      background: #fff;
      overflow: hidden;
      
      .order-item {
        padding: 24rpx;
        
        .order-header {
          margin-bottom: 20rpx;
          
          .order-date {
            color: #666;
            font-size: 24rpx;
          }
        }
        
        .order-content {
          display: flex;
          gap: 20rpx;
          
          .product-image {
            width: 160rpx;
            height: 160rpx;
            border-radius: 12rpx;
            background: #f5f5f5;
          }
          
          .product-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            
            .product-name {
              font-size: 32rpx;
              font-weight: bold;
              color: #333;
              margin-bottom: 8rpx;
            }
            
            .product-desc {
              font-size: 24rpx;
              color: #666;
              margin-bottom: 20rpx;
            }
            
            .times-info {
              display: flex;
              justify-content: space-between;
              align-items: center;
              
              .times {
                color: #666;
                font-size: 24rpx;
              }
              
              .amount {
                color: #FF6B00;
                font-size: 32rpx;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
    
    .empty-state {
      padding: 100rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 20rpx;
      }
      
      text {
        color: #999;
        font-size: 28rpx;
      }
    }
  }
}
</style>
